import React from 'react'
import styles from './index.module.scss'
import Tabs from '@/components/Tabs'
import { getUserChannels } from '@/store/actions/home'
import { useEffect,useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { SearchOutline, AppstoreOutline } from 'antd-mobile-icons'
import ArticleList from './components/ArticleList'

export default function Home() {
  const dispatch = useDispatch()
  //  调用 存储数据到redux中
  useEffect(() => {
    dispatch(getUserChannels())
  }, [dispatch])

  // 从redux中获取频道数据
  const tabs = useSelector((state) => state.home.userChannels)
  
  //当前选中tab栏下标 默认选中第一个 
  const [active,setActive] = useState(0)

  // 点击tab栏 将下标赋值给active
  const changeActive = (ind) =>{
    setActive(ind)
  }

  return (
    <div className={styles.root}>
      <Tabs tabs={tabs} onChange={changeActive}>
        {
          tabs.map((ch) => ( 
            <ArticleList key={ch.id} channelId={ch.id} activeId={tabs[active].id}></ArticleList>
          ))
        }
      </Tabs>

      {/* 频道 Tab 栏右侧的两个图标按钮：搜索、频道管理 */}
      <div className="tabs-opration">
        <SearchOutline className='icon' />
        <AppstoreOutline className='icon' />
      </div>
    </div>
  )
}
